{% extends "layout.html" %}
{% block subtitle %}{{ current_user.username }}'s Profile{% endblock %}
{% from "snipple/macro.html" import navigation with context%}
{% block nav %}
 {{ navigation('other') }}
{% endblock %}
{% block main %}
<div class="container">
  <div class="row">
    <div class="col-md-3"></div>
    <div class="col-md-6">
      <div class="box panel panel-default">
        <div class="panel-body">
          <table>
            <tr>
              <td>
                <img src="{{ user.avatar(80) }}">
                <div class="sep30"></div>
                <p>{% if user.bio != None %}{{ user.bio }}{% endif %}</p>
              </td>
              <td width="70px"></td>
              <td>
                <h3>{{ user.username }}{% if user.location != None %}, {{ user.location }}{% endif %}</h3>
                <div class="sep5"></div>
                {% include "snipple/social-links.html" %}
                <div class="sep10"></div>
                <p>Join At {{ user.created.strftime('%Y-%m-%d %H:%M:%S') }}</p>
                {% if user.website != None %}<p><a href="{{ user.website }}">{{ user.website }}</a></p>{% endif %}
              </td>
            </tr>
          </table>
        </div>
      </div>
      <div class="box-with-no-height panel panel-default">
        <div class="panel-heading">Recent Posts</div>
          {% if user_posts %}
            {% for user_post in user_posts %}
              <div class="panel-body add-border">
                <div class="post-title" style="margin-left:10px;"><a href="#">{{ user_post.title }}</a></div>
              </div>
            {% endfor %}
          {% endif %}
      </div>
      <div class="box-with-no-height panel panel-default">
        <div class="panel-heading">Recent Replies</div>
          {% if user_replies %}
            {% for user_reply in user_replies %}
            <div class="panel-body add-border">
              <div class="post-title" style="margin-left:10px;"><a href="#">{{ user_reply.comment }}</a></div>
            </div>
            {% endfor %}
          {% endif %}
      </div>
    </div>
    <div class="col-md-3"></div>
  </div>
</div>
{% endblock %}
